<template>
  <div class="home-container">
    <aside class="sidebar">
      <ul>
        <li :class="{active: selected === 'message'}" @click="goTo('message')">消息通知</li>
        <li :class="{active: selected === 'logs'}" @click="goTo('logs')">日志查询</li>
      </ul>
    </aside>
    <main class="main-content">
      <GlobalNotifier
        v-if=change
        title="提示"
        type="info"
        :show=change
      />
      <router-view />
    </main>
  </div>
</template>

<script>
import GlobalNotifier from '@/components/GlobalNotifier.vue';

export default {
  name: 'Home',
  data() {
    return {
      selected: this.$route.name === 'MessageLogs' ? 'logs' : 'message',
      change: false
    }
  },
  watch: {
    '$route.name'(newVal) {
      this.selected = newVal === 'MessageLogs' ? 'logs' : 'message'
    }
  },
  methods: {
    goTo(page) {
      this.change = false;
      if (page === 'message') {
        this.$router.push({ name: 'MessageSend' });
      } else {
        this.$router.push({ name: 'MessageLogs' });
      }
    }
  }
}
</script>

<style scoped>
.home-container {
  display: flex;
  height: 100vh;
}
.sidebar {
  width: 200px;
  background: #f5f5f5;
  padding: 0;
}
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar li {
  padding: 20px;
  cursor: pointer;
}
.sidebar li.active {
  background: #409eff;
  color: #fff;
}
.main-content {
  flex: 1;
  padding: 24px;
  background: #fff;
}
</style>
